<template>
	<view class="container" :style="appThemeStyle">
		<view class="footer-fixed">
		  <view class="btn-wrapper">
		    <view class="btn-item btn-item-main" @click="handleCreate()">新增预约</view>
		  </view>
		</view>
		<view class="addres-list">
		  <view class="address-item" v-for="(item, index) in list" :key="index">
		    <view class="contacts">
		      <text class="name">{{ item.real_name }}</text>
		      <text class="phone">{{ item.mobile }}</text>
		    </view>
			<view class="contacts">
			  <text class="phone">{{ item.status_text }}</text>
			</view>
		    <view class="line"></view>
		    <view class="item-option" v-if="item.status==0">
		      <view class="_right">
		        <view class="events">
		          <view class="event-item" @click="handleUpdate(item.booking_id)">
		            <text class="iconfont icon-edit"></text>
		            <text class="title">修改</text>
		          </view>
		          <view class="event-item" @click="handleRemove(item.booking_id)">
		            <text class="iconfont icon-delete"></text>
		            <text class="title">取消</text>
		          </view>
		        </view>
		      </view>
		    </view>
			<view v-if='item.status==1'>
				<view>请于{{item.book_time}}到门店接收服务</view>
			</view>
		  </view>
		</view>
	</view>
</template>

<script>
	import * as FittingApi from '@/api/bike/fitting'
	import Empty from '@/components/empty'
	
	export default {
	  components: {
	    Empty
	  },
	  data() {
	    return {
	      //当前页面参数
	      options: {},
	      // 正在加载
	      isLoading: true,
	      // 预约列表
	      list: [],
	      
	    }
	  },
	
	  /**
	   * 生命周期函数--监听页面加载
	   */
	  onLoad(options) {
	    // 当前页面参数
	    this.options = options
	  },
	
	  /**
	   * 生命周期函数--监听页面显示
	   */
	  onShow() {
	    // 获取页面数据
	    this.getPageData()
	  },
	
	  methods: {
	
	    // 获取页面数据
	    getPageData() {
	      const app = this
	      app.isLoading = true
	      Promise.all([app.getBookingList()])
	        .then(() => {
	          console.log('正常读取数据')
	        })
	        .finally(() => app.isLoading = false)
	    },
	
	    // 获取预约列表
	    getBookingList() {
	      const app = this
	      return new Promise((resolve, reject) => {
	        FittingApi.list()
	          .then(result => {
	            app.list = result.data.list
	            resolve(result)
	          })
	          .catch(reject)
	      })
	    },
	
	    /**
	     * 添加新地址
	     */
	    handleCreate() {
	      this.$navTo('pages/bike/fitting/create')
	    },
	
	    handleUpdate(bookingId) {
	      this.$navTo('pages/bike/fitting/update', { bookingId })
	    },
	
	    handleRemove(bookingId) {
	      const app = this
	      uni.showModal({
	        title: "提示",
	        content: "您确定要取消当前预约吗?",
	        success({ confirm }) {
	          confirm && app.onRemove(bookingId)
	        }
	      });
	    },
	
	    onRemove(bookingId) {
	      const app = this
	      FittingApi.remove(bookingId)
	        .then(result => {
	          app.getPageData()
	        })
	    }
	  }
	}
</script>

<style lang="scss" scoped>
	.addres-list {
	  padding-top: 20rpx;
	  // 设置ios刘海屏底部横线安全区域
	  padding-bottom: calc(constant(safe-area-inset-bottom) + 140rpx);
	  padding-bottom: calc(env(safe-area-inset-bottom) + 140rpx);
	}
	
	// 项目内容
	.address-item {
	  margin: 0 auto 20rpx auto;
	  padding: 30rpx 40rpx;
	  width: 94%;
	  box-shadow: 0 1rpx 5rpx 0 rgba(0, 0, 0, 0.05);
	  border-radius: 16rpx;
	  background: #fff;
	}
	
	.contacts {
	  font-size: 30rpx;
	  margin-bottom: 16rpx;
	
	  .name {
	    margin-right: 16rpx;
	  }
	}
	
	.address {
	  font-size: 28rpx;
	
	  .region {
	    margin-right: 10rpx;
	  }
	}
	
	.line {
	  margin: 20rpx 0;
	  border-bottom: 1rpx solid #f3f3f3;
	}
	
	.item-option {
	  display: flex;
	  justify-content: space-between;
	  height: 48rpx;
	
	  // 单选框
	  .item-radio {
	    font-size: 28rpx;
	
	    .radio {
	      vertical-align: middle;
	      transform: scale(0.76)
	    }
	
	    .text {
	      vertical-align: middle;
	    }
	  }
	
	  // 操作
	  .events {
	    display: flex;
	    align-items: center;
	    line-height: 48rpx;
	
	    .event-item {
	      font-size: 28rpx;
	      margin-right: 26rpx;
	      color: #4c4c4c;
	
	      &:last-child {
	        margin-right: 0;
	      }
	
	      .title {
	        margin-left: 8rpx;
	      }
	    }
	  }
	
	}
	
	// 底部操作栏
	.footer-fixed {
	  position: fixed;
	  bottom: var(--window-bottom);
	  left: 0;
	  right: 0;
	  z-index: 11;
	
	  // 设置ios刘海屏底部横线安全区域
	  padding-bottom: constant(safe-area-inset-bottom);
	  padding-bottom: env(safe-area-inset-bottom);
	
	  .btn-wrapper {
	    height: 120rpx;
	    padding: 0 40rpx;
	  }
	
	  .btn-item {
	    flex: 1;
	    font-size: 28rpx;
	    height: 86rpx;
	    color: #fff;
	    border-radius: 50rpx;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    box-shadow: 0 1rpx 5rpx 0 rgba(0, 0, 0, 0.05);
	  }
	
	  .btn-item-main {
	    background: linear-gradient(to right, $main-bg, $main-bg2);
	    color: $main-text;
	  }
	
	}
</style>